<template>
    <div class="updatepwd-container">
        <el-card class="updatepwd-card">
            <el-form :model="form" ref="form" :rules="rules">
                <el-form-item class="updatepwd-form-item" label="旧密码:" prop="password">
                    <el-input show-password clearable style=" width: auto;" v-model="form.password" size="small" placeholder="输入旧密码">
                    </el-input>
                </el-form-item>
                <el-form-item class="updatepwd-form-item" label="新密码:" prop="newPassword">
                    <el-input show-password clearable style=" width: auto;" v-model="form.newPassword" size="small"
                        placeholder="输入新密码"></el-input>
                </el-form-item>
                <el-form-item class="updatepwd-form-item" label="验证码:" prop="inputVal">
                    <el-input clearable style=" width: auto;" v-model="form.inputVal" size="small" placeholder="输入验证码">
                        <template slot="append">
                            <ValidCode ref="ref_validateCode" @change="changeCode" class="valiCode" />
                        </template>
                    </el-input>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="update" size="small">确定</el-button>
            <el-button type="info" @click="reSet" size="small">重置</el-button>
        </el-card>
    </div>
</template>

<script>
import ValidCode from '@/components/ValidCode.vue';
import { updatePwdAPI } from '@/api/inf'
export default {
    components: {
        ValidCode
    },
    data() {
        return {
            form: {
                password: '',
                newPassword: '',
                inputVal: '',
            },
            checkCode: '',
            rules: {
                password: [
                    { required: true, message: '旧密码不能为空', trigger: 'blur' }
                ],
                newPassword: [
                    { required: true, message: '新密码不能为空', trigger: 'blur' }
                ],
                inputVal: [
                    { required: true, message: '验证码不能为空', trigger: 'blur' }
                ],
            },
        }
    },
    mounted() { },
    methods: {
        reSet() {
            this.form.password = ''
            this.form.newPassword = ''
            this.form.inputVal = ''
            this.$refs.form.clearValidate();
        },
        changeCode(value) {
            this.checkCode = value//获取传进来的验证码
        },
        update() {
            this.$refs.form.validate((ok) => {
                if (ok) {
                    if (this.checkCode === this.form.inputVal.toUpperCase()) {//不区分大小写验证(全部转换为大写)
                        this.$confirm("你确定要更改?").then(async () => {
                            const res = await updatePwdAPI(this.form)
                            if (res.code == 200) {
                                this.$message.success("修改成功")

                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    } else {
                        this.$message.error("验证码错误")
                    }
                    this.$refs["ref_validateCode"].draw();
                    this.form.inputVal = ''
                }
            })

        },

    }
}
</script>

<style scoped>
.updatepwd-card {
    width: 45%;
    margin: 30px;
}

.valiCode {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.updatepwd-form-item {
    display: flex;
    align-items: center;
}
</style>
